<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>JFinal--Controller 传参之文件上传</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="assets/js/jquery1.8.js"></script>
<script type="text/javascript" src="assets/js/jquery.form.js"></script>
<style type="text/css">
</style>
</head>

<body>
	<div style="width:500px;">
		<h2>JFinal Controller 传参之文件上传</h2>
		<hr>
		<fieldset>
			<legend>Form表单 Post提交</legend>
			<form action="/param/formupload" method="post" target="_blank"
				enctype="multipart/form-data">
				<table style="text-align: left;">
					<tr>
						<td>头像:</td>
						<td><input type="file" name="img" /></td>
					</tr>
					<tr>
						<td>姓名:</td>
						<td><input type="text" name="name" value="小木学堂" /></td>
					</tr>
					<tr>
						<td>年龄:</td>
						<td><input type="text" name="age" value="26" /></td>
					</tr>
					<tr>
						<td>生日:</td>
						<td><input type="date" name="birthday" value="2015-01-01" /></td>
					</tr>
					<tr>
						<td>部门:</td>
						<td><select name="department">
								<option>=选择部门=</option>
								<option value="1" selected="selected">研发部</option>
								<option value="2">销售部</option>
								<option value="3">市场部</option>
						</select></td>
					</tr>
					<tr>
						<td>职位:</td>
						<td><select name="posation">
								<option>=选择职位=</option>
								<option value="1" selected="selected">部门经理</option>
								<option value="2">经理助理</option>
								<option value="3">普通职员</option>
						</select></td>
					</tr>
					<tr>
						<td>简介:</td>
						<td><textarea name="desc" style="width: 200px;height:60px;">程序猿是天底下最可爱的人！:)</textarea></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><input type="submit"
							value="提交">&nbsp;&nbsp;<input type="reset" value="重置"></td>
					</tr>
				</table>
			</form>
		</fieldset>
		<fieldset>
			<legend>AJAX 上传文件</legend>
			<button id="ajaxuploadBtn" onclick="$('#imginput').click();">AJAX
				Upload</button>
					<div style="display: ;">
				<form method="post" id="avatarForm" enctype="multipart/form-data">
					<input type="file" name="img" id="imginput">
				</form>
					</div>
			<fieldset>
				<legend>AJAX 上传结果</legend>
				<div id="ajaxresult"
					style="width: 200px;height:200px;border: 1px solid #CCC;margin-top: 5px;">

				</div>
			</fieldset>
			<script type="text/javascript">
				$(function() {
					$("#imginput").on("change", function() {
						$("#avatarForm").ajaxSubmit({
							url : "/param/ajaxupload",
							type : "post",
							dataType : "json",
							success : function(data) {
								$("#ajaxresult").html("");
								var img = new Image();
								img.src = data.imgurl;
								img.width = 200;
								img.height = 200;
								$("#ajaxresult").append(img);
							}
						});

					});

				});
			</script>
		</fieldset>
	</div>
</body>
</html>
